<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" />
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			
			.main-container {
				position: fixed;
				/*固定定位*/
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				background-color: #DDDDDD;
				min-width: 800px;
				min-height: 600px;
			}
			
			.header-container {
				position: absolute;
				left: 0px;
				right: 0px;
				margin-top: 0px;
				height: 60px;
				display: flex;
				background-color: #80BDFF;
			}
			.header-container>.title-logo-info{
				position: absolute;
				height: 60px;
				line-height: 55px;
				left: 100px;
				font-size: 36px;
				letter-spacing: 5px;
				font-weight: bold;
				text-shadow: 3px 2px 1px #FD7E14;
				border: none;
				color: #FFFFFF;
			}
			.title-menu{
				position: absolute;
				right: 100px;
				width: 100px;
				height: 60px;
				line-height: 60px;
			}
			
			.btn-group>button{
				border:0px;
				background-color: rgba(0, 0, 0, 0);
				outline: none;
				color: #FFFFFF;
				
			}
			
			.nav-container {
				position: absolute;
				top: 60px;
				margin-left: 0px;
				width: 200px;
				bottom: 50px;
				background-color: #666666;
				;
			}
			
			.content-container {
				position: absolute;
				top: 60px;
				left: 200px;
				right: 0px;
				bottom: 50px;
				background: #FFFFFF;
			}
			
			.bottom-container {
				position: absolute;
				bottom: 0px;
				height: 50px;
				left: 0px;
				right: 0px;
				background-color: #343A40;
			}
			
			
			
			/***
			 * 导航栏菜单样式
			 * */
			
			
			/**主菜单样式*/
			.main-menu{
				width: 100%;
				padding:15px 0px;
				background-color:#8D8D8D;
				color: #E9E7E7;
				font-size: 18px;
				letter-spacing: 3px;
				/*text-align: center;*/
			}
			.main-menu:hover{
				color: #FFFFFF;
				cursor: pointer;
			}
			.sub-menu{
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #95999C;
				letter-spacing: 3px;
				
			}
			.menu-item:link,.menu-item:visited{
				width: 100%;
				padding: 15px 0px 15px 65px;
				text-decoration: none;
				font-size: 16px;
				color: #E9E7E7;
				
			}
			.menu-item:hover{
				background-color:  #454D55;
				color: #FFFFFF;
			}
			/**箭头图标合起来的样式*/
			
			.main-menu.collapsed:after {
				content: "\f078";
			}
			/**箭头图标展开式时的样式*/
			
			.main-menu:after {
				border: none;
				content: "\f077";
				font-family: FontAwesome;
				font-size: 15px;
				padding-left: 25px;
			}
			.first-fa{
				padding-right: 15px;
				padding-left: 20px;
			}
			
			
			.content-container>iframe{
				width: 100%;
				height: 100%;
				border: none;
			}
			
		</style>
	</head>

	<body>
		<div class="main-container">
			<div class="header-container">
				<div class="title-logo-info">
					加中实训办公平台
				</div>
				<div class="title-menu">
					<!-- Example single danger button -->
					<div class="btn-group">
					  <button type="button" class=" dropdown-toggle" data-toggle="dropdown" >
					    小美
					  </button>
					  <div class="dropdown-menu">
					    <a class="dropdown-item" href="#" >个人中心</a>
					    <a class="dropdown-item" href="#">修改密码</a>
					    <a class="dropdown-item" href="#">安全退出</a>
					    
					  </div>
					</div>
				</div>
			</div>
			
			<div class="nav-container">
				
				<div class="accordion" id="menu" >
					<!--菜单开始-->
					<div class="menu-panel">
						<div class="main-menu collapsed" data-toggle="collapse" data-target="#collapseOne1">
							<i class="fa fa-bars first-fa"></i>权限管理
						</div>
	
						<div id="collapseOne1" class="sub-menu collapse"  data-parent="#menu">
							
								<a href="http://www.baidu.com" class="menu-item" target="content-frame">角色管理</a>
								<a href="" class="menu-item">用户管理</a>
								<a href="" class="menu-item">权限管理</a>
						</div>
					</div>
					<!--菜单结束-->
					<!--菜单开始-->
					<div class="menu-panel">
						<div class="main-menu collapsed" data-toggle="collapse" data-target="#collapseOne2">
							<i class="fa fa-bars first-fa"></i>权限管理
						</div>
	
						<div id="collapseOne2" class="sub-menu collapse"  data-parent="#menu">
							
								<a href="" class="menu-item">角色管理</a>
								<a href="" class="menu-item">用户管理</a>
								<a href="" class="menu-item">权限管理</a>
						</div>
					</div>
					<!--菜单结束-->
					<!--菜单开始-->
					<div class="menu-panel">
						<div class="main-menu collapsed" data-toggle="collapse" data-target="#collapseOne3">
							<i class="fa fa-bars first-fa"></i>权限管理
						</div>
	
						<div id="collapseOne3" class="sub-menu collapse"  data-parent="#menu">
							
								<a href="" class="menu-item">角色管理</a>
								<a href="" class="menu-item">用户管理</a>
								<a href="" class="menu-item">权限管理</a>
						</div>
					</div>
					<!--菜单结束-->
					
				</div>

			</div>
			<div class="content-container">
				<iframe name="content-frame"></iframe>
			</div>
			<div class="bottom-container">

			</div>
		</div>
		
		
		
		<script type="text/javascript" src="../../js/jquery-3.4.1.min.js" ></script>
		<script type="text/javascript" src="../../js/popper.min.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
	</body>

</html>